<template>
  <div class="benshuo">
    <LoadingComponent v-slot="{ loadingFlag }" class="benshuo-banner">
      <img
        :src="'http://www.shxw114.com:9527/' + it.apor_nav"
        v-for="it in ModCollegeimgDates"
        v-if="loadingFlag"
        :key="it.apor_id"
      />
    </LoadingComponent>
    <div class="to_">
      <div class="tit32">
        <h2>3+2、2+3本硕连读</h2>
      </div>
      <div class="sokskjus">
        <img src="/img/t_pic_04.png" />
      </div>
      <div class="jies_zi">
        <h3>国内3年+国外1年本科+国外1年硕士=中留服承认本科、硕士学历</h3>
        <p>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
            ModCollegeimgDates[0]?.apor_text || ""
          }}
        </p>
      </div>
      <div class="tit32">
        <h2>适合人群</h2>
      </div>
      <div class="sokskjus">
        <img src="/img/t_pic_04.png" />
      </div>
      <div class="inner_13">
        <LoadingComponent
          v-slot="{ loadingFlag }"
          class="inner_131"
          v-for="it in ModCollegeuserDates"
          :key="it.dom_id"
        >
          <img
            :src="'http://www.shxw114.com:9527/' + it.dom_nav"
            v-if="loadingFlag"
          />
          <h3>{{ it.dom_name }}</h3>
          <p>
            {{ it.dom_center }}
          </p>
          <a href="">进一步了解></a>
        </LoadingComponent>
      </div>
      <div class="tit32">
        <h2>本硕院校推荐</h2>
      </div>
      <div class="sokskjus">
        <img src="/img/t_pic_04.png" />
      </div>
    </div>
    <div class="to">
      <div class="lxyk_cont">
        <LoadingComponent
          v-slot="{ loadingFlag }"
          class="lxyk_cont1"
          v-for="it in ModCollegeinterDates"
          :key="it.inter_id"
        >
          <img
            :src="'http://www.shxw114.com:9527/' + it.inter_logo"
            v-if="loadingFlag"
          />
        </LoadingComponent>
      </div>
    </div>
    <div class="to_">
      <div class="tit32">
        <h2>项目优势</h2>
      </div>
      <div class="sokskjus">
        <img src="/img/t_pic_04.png" />
      </div>
      <div class="inner_HH">
        <LoadingComponent
          v-slot="{ loadingFlag }"
          class="inner_HH1"
          v-for="it in ModCollegesupDates"
          :key="it.sup_id"
        >
          <img
            :src="'http://www.shxw114.com:9527/' + it.sup_nav"
            v-if="loadingFlag"
          />
          <h5>{{ it.sup_name }}</h5>
          <div></div>
          <p>
            {{ it.sup_center }}
          </p>
        </LoadingComponent>
      </div>
      <div class="tit32">
        <h2>学业规划</h2>
      </div>
      <div class="sokskjus">
        <img src="/img/t_pic_04.png" />
      </div>
      <table data-v-f5bd32b2="" border="1px" style="margin-top: 21px">
        <tbody data-v-f5bd32b2="">
          <tr data-v-f5bd32b2="">
            <th data-v-f5bd32b2="" class="biao32_tou">申请国家</th>
            <th data-v-f5bd32b2="" class="biao32_tou">2＋3留学</th>
          </tr>
          <tr data-v-f5bd32b2="" class="biao32_n_zong" style="border-top: none">
            <td
              data-v-f5bd32b2=""
              class="biao32_nei"
              style="border-right: 1px solid rgb(160, 160, 160)"
            >
              国内预科院校
            </td>
            <td data-v-f5bd32b2="" class="biao32_nei">
              2年（语言课程＋国际预科课程＋国外专业课程）
            </td>
          </tr>
          <tr data-v-f5bd32b2="" class="biao32_n_zong">
            <td
              data-v-f5bd32b2=""
              rowspan="2"
              class="biao32_nei"
              style="border-right: 1px solid rgb(160, 160, 160)"
            >
              国外大学
            </td>
            <td data-v-f5bd32b2="" class="biao32_nei">
              2年国外专业课程（本科）
            </td>
          </tr>
          <tr data-v-f5bd32b2="" class="biao32_n_zong">
            <td data-v-f5bd32b2="" class="biao32_nei">
              1年国外专业课程（硕士）
            </td>
          </tr>
        </tbody>
      </table>
      <table data-v-f5bd32b2="" border="1px" style="margin-top: 21px">
        <tbody data-v-f5bd32b2="">
          <tr data-v-f5bd32b2="">
            <th data-v-f5bd32b2="" class="biao32_tou">申请国家</th>
            <th data-v-f5bd32b2="" class="biao32_tou">2＋3留学</th>
          </tr>
          <tr data-v-f5bd32b2="" class="biao32_n_zong" style="border-top: none">
            <td
              data-v-f5bd32b2=""
              class="biao32_nei"
              style="border-right: 1px solid rgb(160, 160, 160)"
            >
              国内预科院校
            </td>
            <td data-v-f5bd32b2="" class="biao32_nei">
              2年（语言课程＋国际预科课程＋国外专业课程）
            </td>
          </tr>
          <tr data-v-f5bd32b2="" class="biao32_n_zong">
            <td
              data-v-f5bd32b2=""
              rowspan="2"
              class="biao32_nei"
              style="border-right: 1px solid rgb(160, 160, 160)"
            >
              国外大学
            </td>
            <td data-v-f5bd32b2="" class="biao32_nei">
              2年国外专业课程（本科）
            </td>
          </tr>
          <tr data-v-f5bd32b2="" class="biao32_n_zong">
            <td data-v-f5bd32b2="" class="biao32_nei">
              1年国外专业课程（硕士）
            </td>
          </tr>
        </tbody>
      </table>
      <div style="height: 8rem;">
        
      <div class="tit32">
        <h2>留学问题 我来解决</h2>
      </div>
      <div class="sokskjus">
        <img src="/img/t_pic_04.png" />
      </div>
      </div>
    </div>
    <FooterTwo />
    <InquiryHk />
  </div>
</template>
<script setup>
import { ref } from "@vue/reactivity";
import FooterTwo from "../../components/FooterTwo/index.vue";
import InquiryHk from "../inquiryHk/index.vue";
import {
  ModCollegeimgGet,
  ModCollegeuserGet,
  ModCollegeinterGet,
  ModCollegesupGet,
} from "../../server/index.js";
const axios_ = async (v) => {
  const { data } = await v();
  return data;
};
const ModCollegeimgDates = ref({});
const ModCollegeuserDates = ref({});
const ModCollegeinterDates = ref({});
const ModCollegesupDates = ref({});
(async (v) => {
  ModCollegeimgDates.value = await axios_(ModCollegeimgGet);
  ModCollegeuserDates.value = await axios_(ModCollegeuserGet);
  ModCollegeinterDates.value = await axios_(ModCollegeinterGet);
  ModCollegesupDates.value = await axios_(ModCollegesupGet);
})();
</script>
<style scoped>
.benshuo {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.benshuo-banner {
  width: 100%;
  height: 8rem;
}
.benshuo-banner > img {
  width: 100%;
  height: 100%;
}
.to_ {
  width: 12rem;
  height: auto;
  margin: 0 auto;
}
.tit32 {
  width: 100%;
  height: 2rem;
}
.tit32 h2 {
  line-height: 2rem;
  font-size: 0.8rem;
  text-align: center;
}
.sokskjus {
  width: 100%;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
}
.sokskjus img {
  height: 100%;
  width: 6rem;
  margin: 0 auto;
}
.inner_13 {
  width: 100%;
  height: auto;
}
.inner_131 {
  width: 100%;
  height: auto;
}
.inner_131 img {
  width: 100%;
  height: 8rem;
}
.inner_131 h3 {
  width: 100%;
  color: #000;
  margin: 0.4rem 0;
  line-height: 1rem;
}
.inner_131 p {
  font-size: 0.5rem;
  line-height: 1.2rem;
}
.inner_131 a {
  display: block;
  width: 100%;
  font-size: 0.5rem;
  color: #000;
  text-align: right;
}
.lxyk_cont {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lxyk_cont1 {
  width: 6.8rem;
  height: 10rem;
  margin-bottom: 0.4rem;
}
.lxyk_cont1 img {
  width: 100%;
  height: 100%;
}
.inner_HH {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.inner_HH1 {
  width: 6rem;
  height: auto;
  margin-bottom: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.inner_HH1 > img {
  width: 4rem;
  height: 4rem;
}
.inner_HH1 > h5 {
  width: 4rem;
  font-size: 0.4rem;
  color: #000;
  margin-top: 0.4rem;
  margin-left: 0.6rem;
}
.inner_HH1 > p {
  width: 4rem;
  font-size: 0.4rem;
  line-height: 1rem;
}
</style>